<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        .wrapBox {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .startBtn, .endBtn {
            display: block;
            width: 150px;
            height: 120px;
            border: 2px solid;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="wrapBox">
        <button onclick="start()" class="startBtn">开始说话</button>
        <br />
        <button onclick="end()" class="endBtn">结束并转换普通话</button>
    </div>
    <div id="resultText"></div>
    <script>
        const resultTextDiv = document.querySelector('#resultText');
        function start() {
            voiceConversion('start')
        }
        function end() {
            voiceConversion('end')
        }
        function voiceConversion(type) {
            console.log(type);
            try {
                let recognition = new webkitSpeechRecognition() || new SpeechRecognition();
                recognition.lang = 'cmn-Hans-CN'; //普通话 (中国大陆)
                recognition.interimResults = true;
                if (type === 'start') {
                    // 开启
                    recognition.start();
                } else {
                    // 停止
                    recognition.stop();
                }
                recognition.onresult = function(event) {
                    const text = event.results[0][0].transcript;
                    resultTextDiv.innerHTML = text;
                }
            } catch (e) {
                console.log('调用后端接口');
            }
        }
    </script>
</body>
</html>
